<template>
    <div id="bkg">
        <el-row class = "top_box">
            <el-col :span="2">
                <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
            </el-col>
            <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
                答卷结果统计
            </el-col>
            <el-col :span="2">
            <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
            </el-col>
        </el-row>
        <el-container style="min-height:1000px">
            <el-container>
                <el-aside width="200px"
                style="background-color:rgba(162, 143, 202, 0.3); height:1400px;margin-top:20px">
                    <leftMenu
                    :default-active="this.$router.path"
                    @choosePath="choosePath"
                    ></leftMenu>
                </el-aside>
            </el-container>
            <el-main style="text-align: left;margin-left:50px;margin-top:30px;padding: 100px 0 0 250px">

            <el-table 
            :data="allMyCreatedData"
            border
            height="500"
            style="width: 1161px;font-size:18px;margin-top:43px"
            >
                <el-table-column
                    prop="qname"
                    label="问卷名称"
                    width="220">
                    <template slot-scope="scope">
                        <div style="font-size:18px;float:left;padding:12px 5px 0 0">{{scope.row.qname}}</div>
                        <el-button @click="openDetails(scope.row.id, scope.row.num)" type="text">
                                
                                <i style="font-size:18px" class="el-icon-s-data"></i>
                        </el-button>
                        
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="答卷收集情况"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="public"
                    label="结果公开"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="anonymous"
                    label="是否匿名"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="start_time"
                    label="开始时间"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="end_time"
                    label="结束时间"
                    width="220">
                </el-table-column>
            </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import leftMenu from '../components/myComponents/leftMenu'
let allMyCreatedData = []
export default {
    name: 'Statistics',
    components:{
        leftMenu
    },
    data ()
    {
        return {
            allMyCreatedData,
        }
    },
    
    methods:{
        toIndex: function(){
            this.$router.push({path:'/admin'})
        },

        choosePath(key){
            switch (key) {
                case "myReceived":
                    this.$router.push({path: '/myReceived'})
                    break;
                case "statistics":
                    break;
                case "myCreated":
                    this.$router.push({path: '/myCreated'})
                    break;
                case "myModels":
                    this.$router.push({path: '/myModels'})
                    break;
                default:
                    break;
            }
        },

        openDetails: function(id, num) {
            if(num>0){
                this.$router.push({path: '/detailedStatistics', query: {questionnaire_id: id}})
            }
            else{
                this.$alert("暂无数据","提示",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
        },
    },

    mounted(){
        this.$http.get('/getQuestionnairList').then(res => {
            let temp = res.data.data
            let len = allMyCreatedData.length
            for(let i=len-1;i>=0;i--){
                allMyCreatedData.splice(allMyCreatedData.indexOf(i), 1)
            }
            this.$http.get('/getAnswerNumber').then(res2 => {
                let answerNumList = res2.data.data
                console.log(res2.data.data)

                let date = new Date()
                let month = date.getMonth()+1
                if(month<10){
                    month = "0"+month
                }
                let nowTime = date.getFullYear()+"-"+month+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
                
                temp.forEach(element => {
                    if(element.start_time>=nowTime){
                        element.num = "未开始"
                    }
                    if(element.start_time<nowTime){
                        answerNumList.forEach(item => {
                            if(item.qid==element.id){
                                element.num = item.num
                            }
                        })
                        if(!element.num){
                            element.num = 0
                        }
                    }
                    allMyCreatedData.push(element)
                })
            })
            

            console.log("questionnairList:")
            console.log(allMyCreatedData)
            return allMyCreatedData
        })

    }
}
</script>

<style>
#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}
</style>